<!--
	作者：itlangqun@sina.com
	时间：2016-05-22
	描述：
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Web缓存管理 MemAdmin4j</title>
		<link rel="shortcut icon" type="image/ico" href="favicon.ico">
		<!-- 基础lib-->
		<link rel="stylesheet" href="libs/typo.css/typo.css" />
		<link rel="stylesheet" href="css/layout.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" href="libs/comboSelect/css/combo.select.css" />
		<link rel="stylesheet" href="libs/Hui-iconfont_v1.0.7/iconfont.css" />
		<link rel="stylesheet" href="libs/mmGrid/mmGrid.css">
		<link rel="stylesheet" href="libs/mmGrid/mmPaginator.css">
		
		<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="libs/comboSelect/js/jquery.combo.select.js" ></script>
		<script type="text/javascript" src="libs/liMarquee/scroll.js" ></script>
		<script src="libs/mmGrid/mmGrid.js"></script>
        <script src="libs/mmGrid/mmPaginator.js"></script>
        <script type="text/javascript" src="libs/layer-v2.3/layer/layer.js" ></script>
        <script type="text/javascript" src="libs/echart3/echarts.min.js" ></script>
        
		<!--[if lt IE 8]>
		<script type="text/javascript" src="libs/PIE-2.0beta1/PIE_IE678_uncompressed.js" ></script>
		<![endif]-->
		 <!--[if IE 9]>
		<script type="text/javascript" src="libs/PIE-2.0beta1/PIE_IE9_uncompressed.js" ></script>
		<![endif]-->
		
		<script>
			$(function(){
				//上下走马灯
				$('.list_lh li:even').addClass('lieven');
				$("div.list_lh").myScroll({
					speed:40, //数值越大，速度越慢
					rowHeight:68 //li的高度
				});
				
				//菜单初始化
				//$("#firstpane .menu_body:eq(0)").show();
				//$("#firstpane p.menu_head").click(function(){
				//	$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
				//	$(this).siblings().removeClass("current");
				//});
				//$("#secondpane .menu_body:eq(0)").show();
				//$("#secondpane p.menu_head").mouseover(function(){
				//	$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
				//	$(this).siblings().removeClass("current");
				//});
				
				//下拉单选框初始化
				$('select').comboSelect();
				
				//计算屏幕高度与自适应高度设计
				resizeHeight();
				$(window).resize(function(){
					resizeHeight();
				});
				
				//初始化mmGrid
				initMemberOpinionGrid();
				
				layer.alert('请先选择缓存服务器', {
				    skin: 'layui-layer-lan'
				    ,closeBtn: 0
				    ,shift: 4 //动画类型
				  });
				  
				  //echarts初始化测试
				  initEchartView();
			});
			
			function resizeHeight(){
				var windowHeight = $(window).height();
				var height = windowHeight-100-26;
				$("#menuList").height(height);
				$("#mainContent").height(height);
			}
			
			 function initMemberOpinionGrid(){
			    var leftAlign = function(val){
			    	if(val){
			    		return '<div style="text-align:left;text-overflow:ellipsis;white-space:nowrap; *white-space:nowrap;overflow:hidden;" title="'+val+'">'+val+'</div>';
			    	}else{
			    		return "——";
			    	}
			    };
				
		        var cols = [
					{ title:'状态', name:'status',width:80, align:'center', lockWidth:true, lockDisplay:true, renderer: function(val,item,rowIndex){
						if(val=="1"){
							return '<font color="#009999"><i class="Hui-iconfont">&#xe676;</i>正常</font>';
						}else if(val=="0"){
							return '<font color="#FF3366"><i class="Hui-iconfont">&#xe706;</i>出错</font>';
						}else if(val=="2"){
							return '<font color="#FF9900"><i class="Hui-iconfont">&#xe601;</i>预警</font>';
						}
					}},
		            {title:'参数名称', name:'name' ,width:120, align:'center', sortable:false,renderer: function(val,item,rowIndex){
		            	return val;
		            }},
		            {title:'参数值', name:'value' ,width:100, align:'center', sortable:false},
		            {title:'描述', name:'remark' ,width:280, align:'center',sortable:false, renderer:leftAlign}
		        ];
		
		        var mmGrid = $('#kpiDetailGrid').mmGrid({
		            cols: cols,
		            indexColWidth:50,
		            height:'278px',
		            width:'100%',
		            nowrap:true,
		            //root:"list",
		            showBackboard:false,
		            fullWidthRows:true,
		            indexCol:true,
		            lockDisplay:true,
		            noDataText:"请先选择缓存服务器!", 
		            //url: 'memberOpinion/listOpinion.do',
		            items:[
		               {"status":"1", "name":"uptime","value":"1000","remark":"备注信息"},
		               {"status":"2", "name":"uptime","value":"1000","remark":"备注信息"},
		               {"status":"0", "name":"uptime","value":"1000","remark":"备注信息"},
		               {"status":"1", "name":"uptime","value":"1000","remark":"备注信息"},
		               {"status":"1", "name":"uptime","value":"1000","remark":"备注信息"},
		               {"status":"0", "name":"uptime","value":"1000","remark":"备注信息"},
		               {"status":"1", "name":"uptime","value":"1000","remark":"备注信息"},
		               {"status":"2", "name":"uptime","value":"1000","remark":"备注信息"},
		               {"status":"2", "name":"uptime","value":"1000","remark":"备注信息"},
		               {"status":"1", "name":"uptime","value":"1000","remark":"备注信息"},
		               {"status":"1", "name":"uptime","value":"1000","remark":"备注信息"},
		               {"status":"1", "name":"uptime","value":"1000","remark":"备注信息"}
		            ],
		            method: 'post',
		            plugins:[
		              //配置当前grid默认的分页大小以及总记录数的名称
		              //$('#kpiDetailGrid_paginator').mmPaginator({limit:10, totalCountName:'total'})
		            ]
		        });
			}
			 
			 /**查看预警详情信息**/
			 function viewMsgDetail(msgId){
			 	layer.open({
				  type: 1,
				  skin: 'layui-layer-lan', //样式类名
				  closeBtn: 1, //不显示关闭按钮
				  shift: 2,
				  title:'系统预警',
				  area: ['420px', '240px'], //宽高
				  shadeClose: true, //开启遮罩关闭
				  content: '<div class="msg-detail-view">您的服务器已经不堪重负，这是给你的最后遗言！</div>'
				});
			 }
			
			function initEchartView(){
				for(var index=1; index<=3; index++){
						// 基于准备好的dom，初始化echarts实例
				        var myChart = echarts.init(document.getElementById('monitorView'+index));
				        // 指定图表的配置项和数据
				        var option = {
				            title: {
				                text: 'KPI监控'
				            },
				            tooltip: {},
				            legend: {
				                data:['销量']
				            },
				            xAxis: {
				                data: ["衬衫","羊毛衫"]
				            },
				            yAxis: {},
				            series: [{
				                name: '销量',
				                type: 'bar',
				                data: [5, 20]
				            }]
				        };
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				}
				
			    var myChart = echarts.init(document.getElementById('monitorView4'));
				myChart.setOption({
			    series : [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius: '55%',
			            data:[
			                {value:400, name:'搜索引擎'},
			                {value:335, name:'直接访问'},
			                {value:310, name:'邮件营销'},
			                {value:274, name:'联盟广告'},
			                {value:235, name:'视频广告'}
			            ]
			        }
			    ]
			});
				
				
			}
			
		</script>
	</head>
	
	<body>
		
		<div class="container">
			<!--left modular-->
			<div class="container-left-modular">
				<!--logo area -->
				<div class="header">
					 <div class="logo-container">
					 	 <img class="logo" src="img/logo/memcached.gif"/>
					 </div>
					 <div class="title-container">
					 	<h1>WEB缓存管理</h1>
					 	<h3 class="system">MemAdmin4j</h3>
					 	<h4 class="ver"><span class="btns">v0.0.1</span></h4>
					 </div>
				</div>
				<div class="line"></div>
				<!--logo area end -->
				
				<div class="nav">
					系统功能菜单
				</div>
				
				<div class="menu">
					<div id="menuList" class="menu_list">
						    <p class="menu_head current"><i class="Hui-iconfont">&#xe6bf;</i> 缓存监控台</p>
						    <div style="" class=menu_body >
						      <a href="#">监控总览</a>
						      <a href="#">参数设置</a>
						    </div>
						    <p class="menu_head current"><i class="Hui-iconfont">&#xe623;</i> 性能指标监控</p>
						    <div style="" class=menu_body >
						      <a href="#">基本信息</a>
						      <a href="#">实时监控</a>
						      <a href="#">数据统计</a>
						    </div>
						    <p class="menu_head current"><i class="Hui-iconfont">&#xe62e;</i> 数据查询与维护</p>
						    <div style="" class=menu_body >
						      <a href="#">区块查询</a>
						      <a href="#">数据维护</a>
						    </div>
						    <p class="menu_head current"><i class="Hui-iconfont">&#xe621;</i>  命中率统计</p>
						    <div style="" class=menu_body >
						      <a href="#">命中率统计</a>
						    </div>
						    <p class="menu_head current"><i class="Hui-iconfont">&#xe64d;</i> 业务定制模块</p>
						    <div style="" class=menu_body >
						      <a href="#">重置系统缓存</a>
						      <a href="#">清理业务缓存</a>
						    </div>
						</div>
				</div>
				
				<div class="copyright">
					Copyright© 2016 雪浪
				</div>
				
			</div>
			<!--left modular end-->
			
			<!--right modular-->
			<div class="container-right-modular">
				<!--head-->
				<div class="head">
					   <div class="head-top">
					   	     <span class="head-top-title"> &nbsp;&nbsp; &nbsp;&nbsp;缓存连接设置：&nbsp;&nbsp;</span>
					   	     <div class="server-list">
								<select>
									<option value="">===请选择连接服务器===</option>
									<option value="一月">192.168.1.110:11211</option>
									<option value="二月">192.168.1.111:11211</option>
									<option value="二月">192.168.1.112:11211</option>
									<option value="二月">192.168.1.113:11211</option>
									<option value="二月">192.168.1.114:11211</option>
									<option value="二月">192.168.1.115:11211</option>
								</select>
							</div>
							<div class="link-list">
								 <ul>
								 	<li><a href="#"><i class="Hui-iconfont">&#xe70f;</i> Memcache学习中心</a></li>
								 	<li><a href="#"><i class="Hui-iconfont">&#xe633;</i> 使用帮助</a></li>
								 </ul>
							</div>
					   </div>
					   
					   <div class="head-bottom">
					   	      <div class="current-server">
					   	      		<label class=" label"><i class="Hui-iconfont">&#xe601;</i> 当前默认连接：</label>
					   	      		<label class="select">192.168.1.112:11211</label>
					   	      </div>
					   	      <div class="top-message">
					   	      	    <i class="Hui-iconfont">&#xe6e0;</i> 当前无服务器无法连通,请检测故障!
					   	      </div>
					   </div>
					   
					   <div class="line"></div>
				</div>
				<!--head end-->
				
				<!--main nav-->
				<div class="main-nav">
					  <i class="Hui-iconfont">&#xe67f;</i> 当前位置: 缓存监控台 >> 监控总览
				</div>
				<!--main nav end-->
				
				<!--main content-->
				<div id="mainContent" class="main-content">
					  
					  <div class="monitor">
						   <!--第二行-->
						   <div class="cacheSelection" style="clear: both;">
						    	<div class="mon_tit">
						        	<strong><i class="Hui-iconfont">&#xe63c;</i>  重置缓存选择</strong>&nbsp;&nbsp;
						            <span><small>快速操作链接</small></span>
						        </div>
						        <div class="mon_icos">
						        	<div class="yonghu">
						            	<a href="#"></a>
						                <p><strong>重置用户缓存</strong></p>
						            </div>
						            <div class="zuzhi">
						            	<a href="#"></a>
						                <p><strong>重置组织缓存</strong></p>
						            </div>
						            <div class="zidian">
						            	<a href="#"></a>
						                <p><strong>重置字典缓存</strong></p>
						            </div>
						            <div class="suoyin">
						            	<a href="#"></a>
						                <p><strong>重置索引缓存</strong></p>
						            </div>
						            <div class="xitong">
						            	<a href="#"></a>
						                <p><strong>重置系统缓存</strong></p>
						            </div>
						            <div class="yewu">
						            	<a href="#"></a>
						                <p><strong>重置业务缓存</strong></p>
						            </div>
						        </div>
						    </div>
						    
						    <div class="w75">
					    	<div style="border:1px solid #ddd;">
					            <div class="mon_tit">
					                <strong><i class="Hui-iconfont">&#xe6f5;</i> 缓存服务器指标信息</strong>&nbsp;&nbsp;
					                <span><small>指标详细</small></span>
					            </div>
					            <div class="w_inner" style="padding:0px; margin:0px; overflow: hidden;">
					            	 <div class="kpi-detail">
					            	 	  <!-- 主体数据显示Grid -->
									      <table id="kpiDetailGrid" class="mmg">
									      </table>
					            	 </div>
					            </div>
					        </div>
					    </div>
					       
					       <div class="w25" style="margin-right:0; clear:right;">
					    	<div style="border:1px solid #ddd;">
					            <div class="mon_tit">
					                <strong><i class="Hui-iconfont">&#xe63b;</i> 系统预警信息</strong>&nbsp;&nbsp;
					                <span><small>系统警告</small></span>
					            </div>
					            <div class="w_inner">
					            	<!-- 代码开始 -->
									<div class="list_lh">
										<ul>
											<li>
												<p><a class="monitor-type"  href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>紧急</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
											<li>
												<p><a class="monitor-type" href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>严重</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
											<li>
												<p><a class="monitor-type" href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>紧急</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
											<li>
												<p><a class="monitor-type" href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>紧急</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
											<li>
												<p><a class="monitor-type" href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>紧急</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
											<li>
												<p><a class="monitor-type" href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>紧急</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
											<li>
												<p><a class="monitor-type" href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>紧急</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
											<li>
												<p><a class="monitor-type" href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>紧急</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
											<li>
												<p><a class="monitor-type" href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>紧急</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
											<li>
												<p><a class="monitor-type" href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>紧急</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
											<li>
												<p><a class="monitor-type" href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>紧急</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
											<li>
												<p><a class="monitor-type" href="#" > [系统监控] </a><a href="#"  onclick="viewMsgDetail(1)" class="btn_lh">查看</a><em>紧急</em></p>
												<p><a href="#"  onclick="viewMsgDetail(1)" class="a_blue">系统负载过重，请求支援</a><span>2016-05-25 22:16</span></p>
											</li>
										</ul>
									</div>
									<!-- 代码结束 -->
					            </div>
					        </div>
					    </div>
						    							
						  <!--第一行-->
				  		  <div class="w25">
					    	<div style="border:1px solid #ddd;">
					            <div class="mon_tit">
					                <strong><i class="Hui-iconfont">&#xe685;</i> Host Status Diagrams</strong>&nbsp;&nbsp;
					                <span><small>监控指标</small></span>
					            </div>
					            <div class="w_inner" style="padding: 3px;">
					            	 <div id="monitorView1" style="width: 100%;height:250px;"></div>
					            </div>
					        </div>
					    </div>
					       <div class="w25">
					    	<div style="border:1px solid #ddd;">
					            <div class="mon_tit">
					                <strong><i class="Hui-iconfont">&#xe685;</i>  Hits & Misses</strong>&nbsp;&nbsp;
					                <span><small>监控指标</small></span>
					            </div>
					            <div class="w_inner" style="padding: 3px;">
					            	 <div id="monitorView2" style="width: 100%;height:250px;"></div>
					            </div>
					        </div>
					    </div>
					       <div class="w25">
					    	<div style="border:1px solid #ddd;">
					            <div class="mon_tit">
					                <strong><i class="Hui-iconfont">&#xe685;</i>  均衡负载对比</strong>&nbsp;&nbsp;
					                <span><small>监控指标</small></span>
					            </div>
					            <div class="w_inner" style="padding: 3px;">
					            	<div id="monitorView3" style="width: 100%;height:250px;"></div>
					            </div>
					        </div>
					    </div>
						   <div class="w25" style="margin-right:0">
					    	<div style="border:1px solid #ddd;">
					            <div class="mon_tit">
					                <strong><i class="Hui-iconfont">&#xe685;</i>  可用容量大小对比</strong>&nbsp;&nbsp;
					                <span><small>监控指标</small></span>
					            </div>
					            <div class="w_inner" style="padding: 3px;">
					            	<div id="monitorView4" style="width: 100%;height:250px;"></div>
					            </div>
					        </div>
					    </div>
						
						    
						    <!--第三行-->
						    <div class="w49">
						        <div style="border:1px solid #ddd;">
						            <div class="mon_tit">
						                <strong><i class="Hui-iconfont">&#xe683;</i>  查询是否存在Key</strong>&nbsp;&nbsp;
						                <span><small>查询工具</small></span>
						            </div>
						            <div class="w_inner">
						            	<div class="p">
						                	<input type="text" value="  缓存Key" class="wn_text" />
						                    <input type="button" value="执行查询" class="wn_btn01" />
						                </div>
						                <div class="p"><strong>检查结果：</strong></div>
						                <div class="p"><strong class="colorf9">感谢您的耐心等待，查询结果：【Key:ServiceType】在缓存中存在！</strong></div>
						            </div>
						        </div>
						    </div>
						    <div class="w49" style="margin-right:0">
						    	<div style="border:1px solid #ddd;">
						            <div class="mon_tit">
						                <strong><i class="Hui-iconfont">&#xe683;</i>  查询Key对应的数据</strong>&nbsp;&nbsp;
						                <span><small>查询工具</small></span>
						            </div>
						            <div class="w_inner">
						            	<div class="p">
						                	<input type="text" value="  缓存Key" class="wn_text" />
						                    <input type="button" value="执行查询" class="wn_btn01" />
						                </div>
						                <div class="p"><strong>检查结果：</strong></div>
						                <div class="p"><strong class="colorf9">感谢您的耐心等待，查询结果：【Key:ServiceType】在缓存中存在！</strong></div>
						            </div>
						        </div>
						    </div>

					  </div>
					  
				</div>
				<!--main content end-->
				
				<!--bottom msg-->
				<div class="bottom-msg">
				      <strong><i class="Hui-iconfont">&#xe6cd;</i> 操作提示: </strong> 每天高峰期请勿清空缓存以免造成"雪崩"
				</div>
				<!--bottom msg end-->	
			</div>
			<!--right modular end-->
		</div>
		
		<div class="line"></div>
	</body>
</html>
